<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>系统通知</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>

      <style>
          .message{width: 100%}
          .list{padding: 56px 20px 30px;}
          .list .wrap{align-items: center;padding-bottom: 28px}
          .list .wrap img.img{width: 43px;height: 43px;border-radius: 100%;margin-right: 12px;}
          .list .wrap .item{justify-content: space-around;}
          .list .wrap .item .title{font-size: 16px;color: #000;}
          .list .wrap .item .desc{font-size: 13px;color: #999}
          .nomessage{display: flex;flex-direction: column;align-items: center;padding-top: 40%}
          .nomessage img{width: 120px;height: 105px;margin-bottom: 25px;}
          .nomessage span{color: #999}
          .none{display: none}
          .show{display: block;}
      </style>
  </head>
  <body>
    <div class="message">
      <div class="returnBox">
        <div class="return"> <img src="../image/return.png" onclick="api.closeWin()"> <span class="us">系统通知</span></div>
      </div>
      <div class="list none">
        <!-- <div class="wrap flex-wrap">
          <img src="../image/inform.png" class="img" />
          <div class="item flex-wrap flex-vertical">
            <span class="title">这里是标题</span>
            <span class="desc line1">这里是描述描述描述这里是描述描述描述这里是描述描述描述这里是描述描述描述</span>
          </div>
        </div> -->

      </div>

      <div class="nomessage flex-wrap none">
        <img src="../image/nomess.png" />
        <span>暂时还没有通知任何消息呢～</span>
      </div>


    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/encrypt.js"></script>
  <script type="text/javascript">
      apiready = function(){
        $api.fixStatusBar($api.dom('.message'));

        var base = new Base64();
        var userid = $api.getStorage('userID');
        init(1)
        refersh()
        var b = 0
        var pi = 1;
        var arryHtml = [];
        function init(pi){
          var pz = 20
          let json;
          if(userid){
            json = {userID:userid,'pi':pi,'pz':pz}
          }else{
            json = {userID:'00000000-0000-0000-0000-000000000000','pi':pi,'pz':pz}
          }
          let parameter = base.encode(JSON.stringify(json));
          let signValue = parameter + secretKey
          let sign = signValue.MD5(32)
          $api.post(url+'getNoticeListByUser.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
            if(ret.code == 200){

              var html = '';
              var data = ret.data.NoticeList;

              b = data.length
              if(!data.length){
                b = 0
              }
              if(b > 0){
                arryHtml = arryHtml.concat(data)
                $api.removeCls($api.dom('.list'), 'none');
                for (var i = 0; i < arryHtml.length; i++) {
                  html+='<div class="wrap flex-wrap" data-id = "'+arryHtml[i].noticeID+'">'+
                  '<img src="../image/inform.png" class="img" />'+
                  '<div class="item flex-wrap flex-vertical">'+
                  '<span class="title">'+arryHtml[i].noticeTitle+'</span>'+
                  '<span class="desc line1">'+arryHtml[i].noticeContent+'</span>'+
                  '</div>'+
                  '</div>'
                }
                $api.html($api.dom('.list'), html);


              }else{
                $api.removeCls($api.dom('.nomessage'), 'none');
              }
            }else{
              api.toast({
                msg: ret.msg,
                duration: 2000,
                location: 'middle'
              });
            }
          })

        }
        api.addEventListener({
            name:'scrolltobottom',
            extra:{
                threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err){

          if (b <20 ) {
                $api.append($api.dom('.list'),'<div class="nomore">没有更多了~</div>')
                api.removeEventListener({
                    name: 'scrolltobottom'
                });
            } else {
                pi+=1;
                init(pi)
            }
        });

      };
  </script>
  </html>
